<style scoped>
    .ivu-divider-horizontal{
        margin-top:0px
    }

    .from_item{
        width:140px
    }

</style>
<template>
    <div>
        <Row>
            <Col span="24">
                <Button type="primary" icon="md-add">创建问题单</Button>
            </Col>
        </Row>
        <Divider style="margin-bottom:20px;margin-top:20px"/>
        <Row>
            <Col span="24">
                <Form :model="dtsQueryParam" :label-width="80" inline>
                    <FormItem label="迭代">
                        <Select v-model="dtsQueryParam.prodectPI" clearable class="from_item">
                            <Option value="1">迭代1</Option>
                            <Option value="2">迭代2</Option>
                            <Option value="3">迭代3</Option>
                            <Option value="4">迭代4</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="问题单号">
                        <Input type="text" v-model="dtsQueryParam.dtsNo" class="from_item" placeholder="问题单号">
                        </Input>
                    </FormItem>
                    <FormItem label="处理人">
                        <Input type="text" v-model="dtsQueryParam.curModifer" class="from_item" placeholder="处理人工号">
                        </Input>
                    </FormItem>
                    <FormItem label="创建人">
                        <Input type="text" v-model="dtsQueryParam.creator" class="from_item" placeholder="创建人工号">
                        </Input>
                    </FormItem>
                    <FormItem label="状态">
                         <Select v-model="dtsQueryParam.dtsStatus" class="from_item">
                            <Option value="DEV">待修改</Option>
                            <Option value="REVIEW">待审核</Option>
                            <Option value="TESTER">待回归</Option>
                            <Option value="CLOSED">关闭</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="问题级别">
                         <Select v-model="dtsQueryParam.dtsLevel" class="from_item">
                            <Option value="HIGH">严重</Option>
                            <Option value="MIDDLE">一般</Option>
                            <Option value="LOW">提示</Option>
                        </Select>
                    </FormItem>
                    <Button type="primary" @click="handleSubmit('formInline')">查询</Button>
                </Form>
            </Col>
        </Row>
        <Row>
            <Col span="24">
                 <Table border stripe :columns="columns1" :data="tableReturnData.record" min-height="350">
                    <template slot-scope="{ row, index }" slot="action">
                        <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">编辑</Button>
                        <Button type="error" size="small" @click="remove(index)">删除</Button>
                    </template>
                 </Table>
            </Col>
        </Row>
        <Row style="margin-top:20px">
            <Col span="24">
                <Page :total="tableReturnData.recordCount" 
                    @on-change="onChangePage" 
                    @on-page-size-change="onPageSizeChange"
                    show-sizer show-total/>
            </Col>
        </Row>
    </div>
</template>
<script>
    export default {
        created(){
            this.initDTSTable();
        },
        data () {
            return {
                // 列表查询数据
                dtsQueryParam:{
                    dtsNo:'',
                    dtsStatus:'',
                    pageNo:1,
                    recordNum:10,
                    curModifer:'',
                    creator:'',
                    dtsLevel:'',
                    prodectPI:''
                },

                //详情列表
                columns1: [
                    {title: '问题单号',key: 'dtsNo'},
                    {title: '问题描述',key: 'title',width: '400px',tooltip:'true'},
                    {title: '处理人',key: 'curModifer'},
                    {title: '创建人',key: 'creator'},
                    {title: '状态',key: 'dtsStatus'},
                    {title: '操作',slot: 'action', key: 'action', align: 'center'}
                ],
                tableReturnData:"",
            }
        },
        methods: {
            handleSubmit(name) {
                // this.$refs[name].validate((valid) => {
                //     if (valid) {
                //         this.$Message.success('Success!');
                //     } else {
                //         this.$Message.error('Fail!');
                //     }
                // })
                this.initDTSTable();
            },

            /**
             * 加载表格
             */
            initDTSTable(){
                //查询列表
                this.$http.post(config.serverIpAndPort + "dts/dtsListByPage", 
                    this.dtsQueryParam
                ).then(response => {
                this.tableReturnData = response.body;
                }, response => {
                console.log('失败');
                });
            },

            /**
             * 表格分页
             */
            onChangePage(value){
                this.dtsQueryParam.pageNo = value;
                this.initDTSTable();
            },

            onPageSizeChange(value){
                this.dtsQueryParam.recordNum = value;
                this.initDTSTable();
            }
        }
    }
</script>